import React from 'react';
import BaseModule from "../common/BaseModule";
import Lng from '../common/lng';
import Service from "./Service";
import DishDetail from "./DishDetail";
import EditDishForm from "./EditDishForm";

class Dish extends BaseModule {

    constructor(props) {
        super(props);

        this.toolbar.add = false;

        this.state.id = "";
    }

    loadData() {
        this._page.items = [];
        this._page.items.push({
            queryKey: "code",
            queryValue: this.refs.input.input.value,
            conditionType: "LIKE"
        }, {
            queryKey: "name",
            queryValue: this.refs.input.input.value,
            conditionType: "LIKE"
        });

        super.superLoadData(Service.listDishes);
    }

    edit(record) {
        const self = this;
        self.setState({
            id: record.id
        }, () => {
            self.refs["dishEdit"].showModal();
        });
    }

    detailClick(record) {
        const self = this;
        self.setState({
            id: record.id
        }, () => {
            self.refs["dishDetail"].showModal();
        });
    }

    render() {
        const columns = [{
            title: Lng.get("dish.code"),
            dataIndex: 'code',
            key: 'code',
        }, {
            title: Lng.get("dish.name"),
            dataIndex: 'name',
            key: 'name',
        }, {
            title: Lng.get("dish.dishTypeName"),
            dataIndex: 'dishTypeName',
            key: 'dishTypeCode',
        }, {
            title: Lng.get("device.name"),
            dataIndex: 'deviceTypeName',
            key: 'deviceTypeCode',
        }, {
            title: Lng.get("dish.merge"),
            dataIndex: 'merge',
            key: 'merge',
            render: (text, record, index) => {
                return text ? Lng.get("common.yes") : Lng.get("common.no");
            }
        }, {
            title: Lng.get("store.main"),
            dataIndex: 'storeName',
            key: 'storeCode',
        }, {
            title: Lng.get("dish.deviceDisplayName"),
            dataIndex: 'deviceDisplayName',
            key: 'deviceDisplayName',
        }, {
            title: Lng.get("common.operation"),
            dataIndex: 'operation',
            key: 'operation',
            render: (text, record, index) => {
                return <div className={"operation"}>
                    <a onClick={this.edit.bind(this, record)}>{Lng.get("common.edit", {name: ""})}</a>
                    <a onClick={this.detailClick.bind(this, record)}>{Lng.get("common.detail", {some: ""})}</a>
                </div>
            }
        }];
        return (
            <div id={"dish-content"}>
                {this.renderSearchBar(Lng.get("dish.placeholder"))}
                {this.renderTable(columns)}
                {this.renderDetailModal("dishDetail", DishDetail, Lng.get("dish.main"), this.state.id)}
                {this.renderEditModal("dishEdit", EditDishForm, Lng.get("dish.main"), this.state.id, Service.update)}
            </div>

        )
    }
}

export default Dish;